<template>
  <div class="root">
    <div class="top">
      <span class="logo">XLKBLOG</span>
    </div>
    <div class="article">
      <h2 class="title">{{article.title}}</h2>
      <div class="message">
        <div class="kind">
          <p>文章标签:</p>
          <div class="tag">
            <button v-for="kind in kinds">{{kind}}</button>
          </div>
        </div>
        <p class="article-msg">
          <span>发布时间：{{article.time}} </span>
          <span>浏览次数：{{article.view}}</span>
          <span>点赞次数：{{article.approve}}</span>
          <span><a href="#comment" style="text-decoration:none">评论条数：{{comments.length}}</a></span>
        </p>
      </div>
      <!--文章详细内容-->
      <div class="content" id="content" v-html="article.detail"></div>
    </div>
    <hr class="content-hr" data-content="希望得到您的点赞评论哦">
    <div class="approve">
      <img id="approveImg" src="../assets/images/approve_no.png" @click="articleApproveClick()" />
      <p>{{article.approve}}人点赞</p>
    </div>

    <div class="comment">
      <input v-model="commentInput" placeholder="来评论一下吧"></input>
      <button type="button" @click="commentClick()">评论</button>
      <ul>
        <li v-for="comment in comments">
          <p>[ {{getTime(comment.time)}} ]</p>
          <span>{{comment.content}}</span>
          <img class="commentApprove" src="../assets/images/comment_approve_no.png" @click="commentApproveClick($event,comment.id)"/><span>{{comment.approve}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "BlogDetail",
    data() {
      return{
        article: '',
        comments: '',
        kinds: '',
        commentInput: '',
        articleApproveFlag: true,
        commentApproveFlag: true,
        commentApproveId: 0  //记录评论id
      }
    },
    methods :{
      //文章点赞
      articleApproveClick(){
        let img  = document.getElementById('approveImg');
        let _this = this;
        if(this.articleApproveFlag){
          this.articleApproveFlag = false;
          let formData = new FormData();
          formData.append("id",this.article.id);
          _this.$axios({
            method :'post',
            data: formData,
            url:'http://localhost:8088/updateArticleApprove'
          }).then((response) =>{
            if(response.data.flag){
              _this.article.approve+=1;
              img.src = require('../assets/images/approve_yes.png');
              img.setAttribute('class','approve_active');
              _this.$message({
                showClose: true,
                message: '点赞成功',
                type: 'success',
              });
            }
            else {
              _this.$message({
                showClose: true,
                message: response.data.msg,
                center: true,
                type: 'warning'
              });
            }
          });
        }else {
          _this.$message({
            showClose: true,
            message: '已经点赞过了哦',
            center: true,
            type: 'warning'
          });
        }
      },

      //发表评论
      commentClick(){
        let _this = this;
        if(_this.commentInput.replace(/(\s*$)/g,"")===""){
          _this.$message({
            message: '内容为空，评论失败',
            type: 'error',
          })
        }else {
          let formData = new FormData();
          formData.append("aid",this.article.id);
          formData.append("content",this.commentInput);
          _this.$axios({
            method :'post',
            data: formData,
            url:'http://localhost:8088/insertArticleComment'
          }).then((response) =>{
            if(response.data){
              _this.$message({
                showClose: true,
                message: '评论成功',
                type: 'success',
              });
              _this.commentInput = '';
              _this.$axios({
                method :'post',
                params: {
                  id : _this.article.id,
                },
                url:'http://localhost:8088/findBlogCommentById'
              }).then((response) =>{
                _this.comments = response.data;
              });
            }
            else {
              _this.$message({
                showClose: true,
                message: '抱歉，评论失败',
                type: 'error',
              });
            }
          });
        }
      },

      //评论点赞
      commentApproveClick(event,id){
        let _this = this;
        if(this.commentApproveId!==id){
          this.commentApproveFlag = true;
          let el = event.currentTarget;
          if(this.commentApproveFlag){
            this.commentApproveFlag = false;
            _this.$axios({
              method :'post',
              params: {
                id : id,
              },
              url:'http://localhost:8088/updateCommentApprove'
            }).then((response) =>{
              if(response.data.flag){
                _this.comments.forEach(function (e) {
                  if(e.id===id){
                    e.approve+=1
                  }
                });
                el.src = require('../assets/images/comment_approve_yes.png');
                _this.$message({
                  showClose: true,
                  message: '点赞成功',
                  type: 'success',
                });
                _this.commentApproveId = id;
              }
              else {
                _this.$message({
                  showClose: true,
                  message: response.data.msg,
                  center: true,
                  type: 'warning'
                });
              }
            });
          }else {
            _this.$message({
              showClose: true,
              message: '已经点赞过了哦',
              center: true,
              type: 'warning'
            });
          }
        }
        else {
          _this.$message({
            showClose: true,
            message: '已经点赞过了哦',
            center: true,
            type: 'warning'
          });
        }
      },

      //计算时间到现在差多少天
      getTime(ms){
        let datime = Date.parse(ms);
        let msi = new Date().getTime();
        let cha = msi - datime;
        // 以下是获取时，分，秒，
        let yeas = cha / 1000 / 60 / 60 / 24 / 30 / 12;
        let months = cha / 1000 / 60 / 60 / 24 / 30;
        let weeks = cha / 1000 / 60 / 60 / 24 / 7;
        let days = cha / 1000 / 60 / 60 / 24;
        let hours = cha / 1000 / 60 /60;
        let minutes = cha / 1000 / 60;
        // 一下是声明一个字符串，然后判断月，周，天，时，分
        let str = '';
        if(yeas >= 1) {
          str = `${parseInt(yeas)} 年前`
        }else if(months >= 1){
          str = `${parseInt(months)} 月前`
        }else if(weeks >= 1){
          str = `${parseInt(weeks)} 周前`
        }else if(days >= 1){
          str = `${parseInt(days)} 天前`
        }else if(hours >= 1){
          str = `${parseInt(hours)} 小时前`
        }else if(minutes >= 1){
          str = `${parseInt(minutes)} 分钟前`
        }else{
          str = '刚刚'
        }
        return str
      }

    },
    mounted() {
      //获取地址栏参数
      let id = this.$route.query.id;
      let _this = this;
      this.$axios.all([
        this.$axios.post('http://localhost:8088/findBlogById','id='+id),
        this.$axios.post('http://localhost:8088/findBlogCommentById','id='+id),
        this.$axios.post('http://localhost:8088/findKindByArticleId','id='+id)
      ]).then(this.$axios.spread(function (detailResp, commentResp,kindsResp) {
          _this.article = detailResp.data;
          _this.comments = commentResp.data;
          _this.kinds = kindsResp.data;
      })).catch(() =>
        _this.$message({
          message: '文章加载失败，刷新试试',
          type: 'error',
          offset: 200
        })
      );
      //设置body背景色
      document.querySelector('body').setAttribute('style', 'background:while')
      }
  }
</script>

<style scoped>
  @media only screen and (max-width: 736px) {
    .article-msg span{
      margin: 0 !important;
      display: block;
    }
  }

  .root{
    background: #f5f5f5;
    border-radius: 5px;
    margin: 0 auto;
    width: 75%;
  }
  .top{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
    display:inline-block;
    *display:inline;
    *zoom:1;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #000000;
  }
  .logo{
    margin-left: 15px;
    font-size: 20px;
    font-family: fantasy;
    cursor: pointer;
    transition: 1000ms;
    background: #f1f1f1;
    padding: 5px 5px;
    border-radius: 10px;
    color: black;
  }
  .logo:hover{
    background: black;
    color: white;
  }
  .article{
    padding: 20px 20px 20px 20px;
  }
  .title{
    font-size: 24px;
    overflow-x:hidden;
    word-wrap:break-word;
  }
  .message{
    border-radius: 5px;
    background: #e5e5e5;
    padding: 20px 20px 5px 10px;
    font-size: 8px;
    font-weight: bold;
    color: rgba(50, 52, 52, 0.91);
  }
  .kind{
    overflow: auto;
  }
  .kind p{
    float: left;
  }
  .tag{
    display: flex;
    flex-wrap: wrap;
  }
  .tag button{
    line-height: 25px;
    color: #f1f1f1;
    font-weight: bold;
    border-radius: 3px;
    height: 25px;
    font-size: 8px !important;
    background: #46a86d;
    border: none;
    margin: 5px 5px;
  }
  .tag button::before{
    content: ' ';
    position: absolute;
    left: 0;
    display: inline-block;
    line-height: 25px;
    width: 10px;
    height: 25px;
    margin-right: 5px;
    background: #d6d6d6;
    border: none;
  }
  .article-msg{
    clear: both;
  }
  .article-msg span{
    margin-right: 30px;
  }
  .content{
    margin-top: 30px;
    overflow-x:hidden;
    word-wrap:break-word;
  }
  .content-hr{
    color: #bebec3;
    border: 0;
    font-size: 12px;
    padding: 3em 0;
    position: relative;
  }
  .content-hr::before {
    content: attr(data-content);
    position: absolute;
    padding: 0 1ch;
    line-height: 3px;
    border: solid #bebec3;
    border-width: 0 99vw;
    width: fit-content;
    /* for IE浏览器 */
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
  }
  .approve{
    text-align: center;
    margin-bottom: 30px;
  }
  .approve img{
    width: 50px;
    height: 50px;

  }
  @keyframes sway {
    20% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    40% {
      -webkit-transform: rotate(20deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(20deg);
      -moz-transform-origin: top center;
      transform: rotate(20deg);
      transform-origin: top center;
    }
    60% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    80% {
      -webkit-transform: rotate(-10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(-10deg);
      -moz-transform-origin: top center;
      transform: rotate(-10deg);
      transform-origin: top center;
    }
    100% {
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: top center;
      transform: rotate(0deg);
      transform-origin: top center;
    }
  }
  .approve_active{
    width: 50px;
    height: 50px;
    animation-name: sway;
    animation-duration: 400ms;
    animation-iteration-count: 2;
  }
  .approve p{
    margin-top: 0;
    font-size: 8px;
  }
  .comment{
    padding: 0 50px;
  }
  .comment input{
    width: 80%;
    height: 40px;
    border-radius: 5px;
    border: solid rgba(134, 134, 141, 0.6) 2px;
  }
  .comment input:focus{
    outline:none;
    width: 80%;
    height: 40px;
    border-radius: 5px;
    border: solid #489492 2px ;
  }
  .comment button{
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 10px;
    color: black;
    font-weight: bold;
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    background-image: -moz-linear-gradient(top, #3bbf64, #2b8045);
    background-image: -o-linear-gradient(top, #3bbf64, #2b8045);
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 0 3px 0 5px;
    line-height:15px;
    box-shadow: 2px 2px 2px rgba(110, 110, 110, 0.97);
  }
  .comment button:active{
    transform: translateY(3px);
    box-shadow: 3px 3px 3px rgba(22, 22, 22, 0.97);
    color: black;
  }
  .comment ul{
    text-align: left;
    list-style: none;
    padding-left: 0;
    padding-bottom: 10px;
  }
  .comment ul li{
    margin-bottom: 30px;
    width: 80%;
  }
  .comment ul li p{
    color: #38b77c;
    margin-bottom: 0;
  }
  .comment ul li span{
    overflow-x:hidden;
    word-wrap:break-word;
    color: rgba(63, 67, 64, 0.86);
  }
  .comment ul li img{
    width: 25px;
    height:25px;
    vertical-align:middle;
    margin-bottom: 8px;
  }
</style>

<style>

</style>

